import axios from 'axios'

// 1.模拟get请求
axios.get('http://jsonplaceholder.typicode.com/todos').then((res) => {
  console.log(res)
})

// // 2.get请求，并且传入参数
// axios
//   .get('http://httpbin.org/get', {
//     params: {
//       name: 'coderwhy',
//       age: 18
//     }
//   })
//   .then((res) => {
//     console.log(res)
//   })

// // 3.post请求
// axios
//   .post('http://httpbin.org/post', {
//     data: {
//       name: 'coder',
//       age: 18
//     }
//   })
//   .then((res) => {
//     console.log(res)
//   })

// 4.axios的配置选项
// 4.1 全局的配置
axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 1000

// 4.2 每一个请求单独的配置
// 2.get请求，并且传入参数
axios
  .get('/get', {
    params: {
      name: 'coderwhy',
      age: 18
    },
    timeout: 5000,
    headers: {}
  })
  .then((res) => {
    console.log(res)
  })

// 3.post请求
axios
  .post('/post', {
    data: {
      name: 'coder',
      age: 18
    }
  })
  .then((res) => {
    console.log(res)
  })

// 5.axios.all ->多个请求，一起返回
axios
  .all([
    axios.get('/get', { params: { name: 'coderwhy', age: 18 } }),
    axios.post('/post', { data: { name: 'coder', age: 18 } })
  ])
  .then((res) => {
    console.log(res[0].data)
    console.log(res[1].data)
  })

// 6.axios的拦截器
// fn1:请求成功会执行的函数
// fn2: 请求失败会执行的函数
// axios.interceptors.request.use(fn1,fn2)
axios.interceptors.request.use(
  (config) => {
    // 想做的一些操作
    // 1.给请求添加token
    // 2.isLoading动画
    console.log('请求拦截成功')
    return config
  },
  (err) => {
    console.log('请求发送错误')
    return err
  }
)

// axios.interceptors.response.use(fn1,fn2)
// fn1:数据响应成功(服务器正常返回了数据，2XX)
// fn2:数据响应失败(4XX/5XX)
axios.interceptors.response.use(
  (res) => {
    console.log('响应成功的拦截')
    return res
  },
  (err) => {
    console.log('服务器响应失败')
    return err
  }
)
